<template>
  <div class="container">
    <div class="main">
      <el-card>
        <div slot="header" class="card-header">
          <span>
            <h1>家常菜</h1>
            <span>21 篇菜谱</span>
            <br />
            <span>by <span class="author-name">王楷</span></span>
            <span class="ctime"> 2020-12-21</span>
          </span>
          <div>
            <el-button
              :type="isGuanzhu ? 'danger' : 'info'"
              icon="iconfont icon-guanzhu"
              circle
              @click="goGuanzhu()"
            ></el-button>
            <el-button
              :type="isDianzan ? 'primary' : 'info'"
              icon="iconfont icon-dianzan"
              circle
              @click="goDianzan()"
            ></el-button>
            <el-button
              :type="isShoucang ? 'warning' : 'info'"
              icon="iconfont icon-shoucang"
              circle
              @click="goShoucang()"
            ></el-button>
          </div>
        </div>
        <span>此菜单收录了大量的家常菜做法，欢迎大家尝试</span>
        <div class="empty-status-box" v-if="list.length == 0">
          <span>
            菜单里空空如也，去弄点儿<span
              class="link-btn"
              @click="$router.push('/shipu')"
              >食谱</span
            >进来吧~
          </span>
        </div>
      </el-card>

      <shipu-list :list="list" :type="1" class="shipu-list"> </shipu-list>
    </div>
  </div>
</template>

<script>
import ShipuList from "./ShipuList.vue";
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5],
      isDianzan: false,
      isShoucang: true,
      isGuanzhu: true,
    };
  },
  methods: {
    goDianzan() {
      this.isDianzan = !this.isDianzan;
    },
    goShoucang() {
      this.isShoucang = !this.isShoucang;
    },
    goGuanzhu() {
      this.isGuanzhu = !this.isGuanzhu;
    },
  },
  components: { ShipuList },
};
</script>

<style lang="less" scoped>
.main {
  width: 960px;
  margin: 0 auto;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .author-name {
      color: #333;
      &:hover {
        cursor: pointer;
        color: #fabc2a;
      }
    }
    .ctime {
      color: #333;
      padding: 10px;
    }
    h1 {
      font-weight: 600px;
    }
  }
  .shipu-list {
    background-color: white;
  }
  .empty-status-box {
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: #fff;
  }
}
</style>

